import React from "react";
import { Form, Row, Col } from "antd";
import FormItem from "./FormItem.tsx";
import type { FormItemConfigs } from "../../global.ts";
interface FormProps {
  formItemsConfigs?: FormItemConfigs[];
}

const FormItems: React.FC<FormProps> = ({ formItemsConfigs }) => {
  const form = Form.useFormInstance();

  const renderFormItems = () => {
    const rowMap = new Map<number, FormItemConfigs[]>();

    // 将表单项按行分组
    formItemsConfigs?.forEach((item) => {
      const row = item.row ?? 0;
      if (!rowMap.has(row)) {
        rowMap.set(row, []);
      }
      rowMap.get(row)!.push(item);
    });

    // 渲染每一行
    return Array.from(rowMap.entries()).map(([rowIndex, items]) => (
      <Row key={`row-${rowIndex}`} gutter={16}>
        {items.map((item, colIndex) => (
          <Col key={`${rowIndex}-${colIndex}`} span={item.col ?? 24}>
            <FormItem item={item} index={colIndex} />
          </Col>
        ))}
      </Row>
    ));
  };

  return <>{renderFormItems()}</>;
};

export default FormItems;
